function MakeTh(obj) {
  this.obj=obj;
  let objS=obj.style;
  objS.transformStyle='preserve-3d';
  objS.width='100px';
  objS.height='100px';
  objS.position='absolute';
  this.rule={
    width:'96px',
    height:'96px',
    position:'absolute',
  };
  this.six={
    a:{
      color:'white',tx:0,ty:0,tz:50,
      rx:0,ry:0
    },
    b:{
      color:'#ff2737',tx:0,ty:50,tz:0,
      rx:-90,ry:0
    },
    c:{
      color:'yellow',tx:0,ty:0,tz:-50,
      rx:-180,ry:0
    },
    d:{
      color:'#ffa109',tx:0,ty:-50,tz:0,
      rx:90,ry:0
    },
    e:{
      color:'#49da76',tx:-50,ty:0,tz:0,
      ry:-90,rx:0
    },
    f:{
      color:'#4959c2',tx:50,ty:0,tz:0,
      ry:90,rx:0
    },
  };
  this.setPos();
}
MakeTh.prototype.setPos=function () {
  for(let i in this.six){
    let sixa=document.createElement('div');
    for(let y in this.rule){
      sixa.style[y]=this.rule[y];
    }
    sixa.style.fontSize='20px';
    sixa.style.border='2px solid #999'
    sixa.style.backgroundColor=this.six[i].color;
    sixa.style.transform=` translateX(${this.six[i].tx}px)
                           translateY(${this.six[i].ty}px)
                           translateZ(${this.six[i].tz}px)
                           rotateX(${this.six[i].rx}deg)
                           rotateY(${this.six[i].ry}deg)
                           `;
    this.obj.appendChild(sixa);
  }

}
export default MakeTh
